<template>
  <div>
    <radio-group @change="qizhi">
    <div class="qizhi">
      <span>旗帜</span>
      <div class="qizhi-item"><input type="radio" class="circle" :checked="markLevel == '00'" name="orderRadio" value="00"><img src="/static/images/qizhi-1.png"></div>
      <div class="qizhi-item"><input type="radio" class="circle" :checked="markLevel == '01'" name="orderRadio" value="01"><img src="/static/images/qizhi-2.png"></div>
      <div class="qizhi-item"><input type="radio" class="circle" :checked="markLevel == '02'" name="orderRadio" value="02"><img src="/static/images/qizhi-3.png"></div>
      <div class="qizhi-item"><input type="radio" class="circle" :checked="markLevel == '03'" name="orderRadio" value="03"><img src="/static/images/qizhi-4.png"></div>
      <div class="qizhi-item"><input type="radio" class="circle" :checked="markLevel == '04'" name="orderRadio" value="04"><img src="/static/images/qizhi-5.png"></div>
    </div>
    </radio-group>
    <div style="margin-top: 10px;background-color: #FFFFFF">
        <textarea style="height: 70px;width:100%;border:1px solid rgba(236, 239, 246, 1);border-radius:4px;"
                  v-model="sellerMessage"
                  placeholder="请输入备注内容"
                  placeholder-class="item-placeholder"
                  placeholder-style="font-size:12px;font-weight:100;color:rgba(163,170,183,1);"/>
    </div>
    <div class="foot" >
      <div class="cancle" @click="doCancle">取消</div>
      <div class="queding" @click="doConfirm">确定</div>
    </div>
    <toast ref="toast"/>

  </div>
</template>

<script>

    import api from '@/utils/api'
    import toast from "@/components/toast";


    export default {
        components: {toast},

        data() {
            return {
                orderNo: '',
                markLevel: '',
                sellerMessage : '',
                addr: {},
                name: "",
                phone: "",
                mobile: "",
                fullAddr: "",
                sheng: '',
                shi: '',
                qu: ''
            }
        },

        created() {

        },

        onLoad(options) {
            this.orderNo = options.orderNo;
            this.markLevel = options.markLevel;
            this.sellerMessage = options.sellerMessage ? options.sellerMessage : '';
            this.addr = JSON.parse(decodeURIComponent(options.addr));
            this.name = this.addr.receiverName;
            this.phone = this.addr.phone;
            this.mobile = this.addr.mobile;
            this.fullAddr = this.addr.receiverAddress;
            this.sheng = this.addr.province;
            this.shi = this.addr.city;
            this.qu = this.addr.district;
        },

        methods:{
            doCancle(){
                wx.navigateBack({
                    delta: 1
                })
            },

            qizhi(e){
                var flag = e.mp.detail.value;
                this.markLevel = flag;
                var _this = this;
                wx.request({
                    url: wx.getStorageSync("otherPath") + api.orderMark + "?ecstoken=" + wx.getStorageSync('sessionId'),
                    data: {
                        orderNo : _this.orderNo,
                        markLevel : flag
                    },
                    header: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        ecstoken : wx.getStorageSync('sessionId'),
                        fslb : wx.getStorageSync('fslb')
                    },
                    method: "POST",
                    success(res) {
                        if(res.data.code != 200){
                            _this.$refs.toast.show(res.data.msg);
                            return ;
                        }
                        _this.$refs.toast.show('修改成功')
                    },
                    fail() {
                        _this.$refs.toast.show('网络异常')
                    },
                })
            },

            doConfirm(){
                var _this = this;
                var orderForm = {
                    orderNo : _this.orderNo,
                    sellerMessage : _this.sellerMessage,
                    receiverAddress: this.fullAddr,
                    receiverName: this.name,
                    receiverProvince: this.sheng,
                    receiverCity: this.shi,
                    receiverCounty: this.qu,
                    receiverMobile: this.mobile,
                    receiverPhone: this.phone ? this.phone : ''
                }
                wx.request({
                    url: wx.getStorageSync("otherPath") + api.orderModify + "?ecstoken=" + wx.getStorageSync('sessionId'),
                    data: orderForm,
                    header: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        ecstoken : wx.getStorageSync('sessionId'),
                        fslb : wx.getStorageSync('fslb')
                    },
                    method: "POST",
                    success(res) {
                        if(res.data.code != 200){
                            _this.$refs.toast.show(res.data.msg);
                            return ;
                        }
                        _this.$refs.toast.show('修改成功')
                        setTimeout(function () {
                            wx.navigateBack({
                                delta: 1
                            })
                        },1500)
                    },
                    fail() {
                        _this.$refs.toast.show('网络异常')
                    },
                })
            }
        }
    }
</script>

<style lang="wxss">
  page {
    width: 100%;
    height: 100%;
    background-color: #f7fbff;
  }
</style>

<style scoped>
  .qizhi{
    height: 40px;
    display: flex;
    justify-content: space-around;
    background-color: #FFFFFF;
  }

  .qizhi span{
    height: 40px;
    font-size:13px;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(55,62,79,1);
    line-height:40px;
  }

  .qizhi-item{
    height: 40px;
    line-height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .qizhi-item img{
    float: right;
    height: 19px;
    width: 20px;
  }

  .qizhi-item .circle{
    transform: scale(0.7);
  }

  .foot {
    border-top:1px solid rgba(236, 239, 246, 1);
    text-align: center;
    vertical-align: middle;
    width: 100%;
    height: 40px;
    position: fixed;
    left: 0;
    bottom: 0;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 40px;
    display:flex;
    justify-content: space-around;
  }

  .foot .cancle{
    width: 50%;
    background-color: #FFFFFF;
  }

  .foot .queding{
    width: 50%;
    background-color: #0077ff;
  }
</style>
